<template>
	<view>
		<view class="details-top-box">
			<u-image width="750" height="600" :src="house_info.img" :lazy-load="true" :fade="true" duration="300"
				mode='aspectFill'>
				<u-loading slot="loading"></u-loading>
			</u-image>
			<view class="details-top-box-mask"
				:class="{'details-top-box-mask-up' : drawer_flag , 'details-top-box-mask-down' : !drawer_flag}">
			</view>
			<!-- 回退按钮 -->
			<view class="back-button u-flex u-row-center" :style="{top : nav_top + 'px'}" @click="page_back">
				<u-icon class="back-button-icon u-flex u-row-center"
					:class="{'back-button-icon-up' : drawer_flag , 'back-button-icon-down' : !drawer_flag}"
					:name=" share == 'share' ? 'home' : 'arrow-leftward' " color="#ffffff" size="40"></u-icon>
			</view>
		</view>


		<!-- !status-!nav- -->
		<Drawer @change='DrawerChange' ref="Drawer" allowAll :hasOverlay="false" standout="screen-!570rpx"
			extra="status-nav">
			<!-- 不参与滑动的区域 -->
			<view class="top-no-scroll b-t-l-r b-t-r-r">
				<!-- 关键字 、 收藏 、 分享 按钮 -->
				<view class="details-top u-flex u-row-between u-padding-left-30 u-padding-right-30 u-padding-top-10">
					<view class="details-top-left">
						<text class="house_keywords u-font-24" v-for="(item , index) in house_info.keywords_arr"
							:key='index'>{{item}}</text>
					</view>
					<view class="details-top-right u-flex ">
						<LoginButton @click='collectData' :item='item'>
							<u-icon :name="house_info.user_collect == 1 ? 'heart-fill' : 'heart'" size="40"
								:color="house_info.user_collect == 1 ? '#FA3534' : '#333'"></u-icon>
						</LoginButton>
						<LoginButton :item='item' open_type='share'>
							<u-icon name="zhuanfa" size="40" color="#333" class="u-margin-left-20"></u-icon>
						</LoginButton>
					</view>
				</view>


				<!-- 主题名字 -->
				<text
					class="house_title u-font-40 u-padding-left-30 u-padding-right-30">{{house_info.house_name}}</text>
				<!-- 位置信息 -->
				<view
					class="house_address u-flex u-row-between u-margin-left-30 u-margin-right-30 u-padding-left-24 u-padding-right-24 u-padding-top-30 u-padding-bottom-30">
					<view class="house_address_text">
						<text class="house_address_text-1 u-font-26 u-line-2">{{house_info.address}}</text>
					</view>
					<u-icon class="house_address-icon" name="map" color="#333" size="50" @click="navigation"></u-icon>
				</view>
			</view>
			<scroll-view :scroll-y="true" class="details-scroll-view u-padding-top-20">
				<view class="public-title-bar u-padding-top-20">
					{{house_info.room_num}}种房间可选
				</view>
				<!-- 推荐列表 -->
				<!-- :bottomBar='true' 480 -->
				<u-swiper :height='540' :bottomBar='true' bottomBar_height='210' :effect3d-previous-margin='30'
					:border-radius='10' bg-color='#ffffff' :list="house_info.room_list" :autoplay='false' name='img'
					:effect3d="true" :circular="false" mode='none' @click="go_details">
				</u-swiper>


				<view class="public-title-bar u-margin-bottom-0 u-padding-top-30">
					更多图片
				</view>
				<!-- 宫格预览图 -->
				<view class="u-padding-left-30 u-padding-right-30">
					<u-grid :col="3" :border='false'>
						<u-grid-item @click="view_img(index)" v-for="(item , index) in house_info.img_list" :key='index'
							:custom-style='{padding : "10rpx 10rpx"}'>
							<u-image :src="item" width="220rpx" height="200rpx" duration='300' border-radius='10'>
								<u-loading slot="loading"></u-loading>
							</u-image>
						</u-grid-item>
					</u-grid>
				</view>

				<view class="public-title-bar u-margin-bottom-0 u-padding-top-20">
					游玩攻略
				</view>

				<view class="u-padding-left-30 u-padding-right-30 u-padding-bottom-30 u-margin-top-30">
					<u-read-more ref="uReadMore" :toggle="true" color='#FA3534'>
						<u-parse @load="$refs.uReadMore.init()" :html="house_info.house_info" :seletable="true"
							:lazy-load="true" show-with-animation :tag-style="{
								img : 'display: block;'
							}">
						</u-parse>
					</u-read-more>
				</view>

				<view class="public-title-bar u-margin-bottom-0">
					入住须知
				</view>
				<view class="u-padding-left-30 u-padding-right-30 u-padding-top-30">
					<u-parse :html="house_info.in_house" :seletable="true" :lazy-load="true" show-with-animation>
					</u-parse>
				</view>

			</scroll-view>
		</Drawer>
		
		<view class="phone" v-if="house_info.phone">
			<!-- <text>{{house_info.phone}}</text> -->
			<u-icon name="phone" @click="phone" size="55" color="#fff"></u-icon>
		</view>
	</view>
</template>

<script>
	import LoginButton from '@/components/login-button/index.vue';
	import Drawer from '@/components/d-drawer/drawer.vue'
	import Share from '@/uview-ui/libs/mixin/mpShare.js';
	export default {
		mixins: [Share], // 使用mixin
		data() {
			return {
				id: '', // 房屋id
				house_info: {}, // 房屋详情
				drawer_flag: false,
				share: false,
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.init();
			if (options.type) {
				this.share = options.type;
			}
		},
		methods: {
			phone() {
				uni.makePhoneCall({
				    phoneNumber: this.house_info.phone
				});
			},
			// 导航
			navigation() {
				// if (this.vuex_location !== false) {
				uni.openLocation({
					latitude: this.house_info.lat * 1,
					longitude: this.house_info.lng * 1,
					success: function() {
						console.log('success');
					},
					fail: err => {
						console.log(err);
					}
				});
				// }
			},

			view_img(index) {
				uni.previewImage({
					current: index,
					urls: this.house_info.img_list,
				});
			},

			go_details(index) {
				let id = this.house_info.room_list[index].id;
				this.$u.route({
					url: 'pages/roomDetails/roomData',
					animationType: 'slide-in-bottom',
					params: {
						id: id,
						img_list: encodeURIComponent(JSON.stringify(this.house_info.img_list)),
					}
				})
			},

			// 提交收藏
			collectData() {
				// console.log('提交收藏');
				// console.log(this.id);
				this.$u.api.collectData({
					collect_id: this.id,
					type: 0, // 0 ==  房源
				}).then(res => {
					if (res.code == 1) {
						this.house_info.user_collect = 1;
					}
				})
			},

			//
			init() {
				this.$u.api.house({
					id: this.id
				}).then(res => {
					this.house_info = res.info;
					this.$u.mpShare = {
						path: `pages/roomDetails/index?id=${this.id}&type=share`,
						title: this.house_info.house_name,
						imageUrl: this.house_info.img,
					};
				})
			},

			// 切换详情
			change_details(index) {
				this.id = this.house_info.suggest_list[index].id;
				this.init();
				this.$refs['Drawer'].hide();
			},

			// 回退
			page_back() {
				if (this.share == 'share') {
					this.$u.route({
						url: 'pages/index/index',
						type: 'tab',
					});
				} else {
					this.$u.route({
						type: 'back'
					});
				}
			},
			DrawerChange(val) {
				this.drawer_flag = val;
			}
		},
		watch: {
			'drawer_flag': function(val) {
				if (val) {
					uni.setNavigationBarColor({
						frontColor: '#ffffff',
						backgroundColor: '#eeeeee',
						animation: {
							duration: 400,
							timingFunc: 'easeIn'
						}
					})
				} else {
					uni.setNavigationBarColor({
						frontColor: '#000000',
						backgroundColor: '#eeeeee',
						animation: {
							duration: 400,
							timingFunc: 'easeIn'
						}
					})
				}
			}
		},
		computed: {
			nav_top: function() {
				let nav_top = this.vuex_systemInfo.statusBarHeight;
				return nav_top;
			}
		},
		components: {
			Drawer,
			LoginButton
		}
	}
</script>

<style lang="scss" scoped>
	.phone{
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		background-color: #FCBD71;
		border-radius: 50rpx;
		bottom: 80rpx;
		right: 20rpx;
		box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(255,255,255,.5) ;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.public-title-bar {
		// color: #000000;
		color: #333;
		margin-top: 10rpx;
		padding-left: 30rpx;
		margin-bottom: 10rpx;
		font-weight: 700;
		font-size: 42rpx;
	}

	.top-no-scroll {
		background-color: #FFFFFF;
	}

	.details-top {
		height: 75rpx;
	}

	.house_title {
		height: 75rpx;
		line-height: 75rpx;
		font-weight: 900;
		display: block;
		padding: 0rpx 0rpx;
	}

	.house_address_text-1 {
		display: block;
		max-width: 550rpx;
		color: $u-main-color;
	}

	.house_address {
		background-color: $u-bg-color;
		border-radius: 10rpx;
		height: 100rpx;
	}


	.house_keywords {
		background-color: #eee;
		border-radius: 8rpx;
		margin-right: 10rpx;
		padding: 3rpx 10rpx;
		color: $u-type-info-dark;
	}

	.back-button-icon-up {
		background-color: rgba(0, 0, 0, .7);
	}

	.back-button-icon-down {
		background-color: rgba(0, 0, 0, 0);
	}

	.back-button-icon {
		transition: all .3s;
		width: 60rpx;
		height: 60rpx;
		font-weight: bold;
		border-radius: 30rpx;

	}

	.back-button {
		position: absolute;
		left: 30rpx;
		height: 88rpx;
		width: 88rpx;
	}

	.details-top-box-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 600rpx;
		transition: all .3s;
	}

	.details-top-box-mask-up {
		backdrop-filter: blur(10rpx);
		background-color: rgba(0, 0, 0, .3);
	}

	.details-top-box-mask-down {
		backdrop-filter: blur(0rpx);
		background-color: none;
	}

	.details-top-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 600rpx;
		position: relative;
	}

	.details-swiper-item {
		height: 600rpx;
		width: 750rpx;
	}

	.details-swiper {
		height: 600rpx;
		width: 750rpx;
	}

	.details-swiper-img {
		width: 750rpx;
		height: 600rpx;
	}

	.details-scroll-view {
		background-color: #FFFFFF;
		height: calc(100% - 290rpx);
	}

	.b-t-r-r {

		border-top-right-radius: 30rpx;
	}

	.b-t-l-r {
		border-top-left-radius: 30rpx;
	}
</style>
